<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style type="text/css">
        label{
            font-size: 20px;
            margin: 15px 0 20px 0;
            letter-spacing: 0.05em;
            color: #714cab;
            font-weight: 700;
        }
    </style>
</head>

<body>
<main>
    <form class="form" th:action="@{/login}" th:method="post">
        <div class="form__cover"></div>
        <div class="form__loader">
            <div class="spinner active">
                <svg class="spinner__circular" viewBox="25 25 50 50">
                    <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4"
                            stroke-miterlimit="10"></circle>
                </svg>
            </div>
        </div>
        <div class="form__content">
            <h1>Authorization</h1>
            <label th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></label>
            <div class="styled-input">
                <input type="text" class="styled-input__input" name="username" value="admin2">
                <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">Username</span>
                </div>
                <div class="styled-input__circle"></div>
            </div>
            <div class="styled-input">
                <input type="password" class="styled-input__input" name="password" value="123456">
                <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">Password</span>
                </div>
                <div class="styled-input__circle"></div>
            </div>
            <button type="submit" class="styled-button"><span class="styled-button__real-text-holder"> <span
                    class="styled-button__real-text">Submit</span> <span class="styled-button__moving-block face"> <span
                    class="styled-button__text-holder"> <span
                    class="styled-button__text">Submit</span> </span> </span><span
                    class="styled-button__moving-block back"> <span class="styled-button__text-holder"> <span
                    class="styled-button__text">Submit</span> </span> </span> </span></button>
        </div>
    </form>
</main>
<script th:src="@{js/login.js}"></script>
</body>
</html>
